import QtQuick 1.0

Rectangle {
    id: dlgOptionsRoster

    signal itemClicked;
    property string itemSelected: ""

    function dlgShowHide() {
        if( state == "hidden" ) {
            state = "visible"
        } else {
            state = "hidden"
        }
    }

    width: parent.width*0.9
    height: parent.height*0.6

    radius: 10
    color: "black"
    opacity: 0.85
    border.color: "gray"
    border.width: 3

    clip: true
    state: "hidden"

    ListModel {
        id: modelListOptions
        ListElement {
            name: "accounts"
            image: "qrc:/qml/images/presence-online.png"
        }
        ListElement {
            name: "offlinejid"
            image: "qrc:/qml/images/presence-online.png"
        }
        ListElement {
            name: "groups"
            image: "qrc:/qml/images/presence-online.png"
        }
        ListElement {
            name: "quit"
            image: "qrc:/qml/images/presence-away.png"
        }
    }

    function textItem( nameElement )
    {
        var ret = ""
        if( nameElement === "accounts" ) {
            ret = qsTr("Accounts")
        } else if( nameElement === "offlinejid" ) {
            ret = qsTr("Show/Hide offline users")
        } else if( nameElement === "groups" ) {
            ret = qsTr("Show/Hide groups")
        } else if( nameElement === "vcard" ) {
            ret = qsTr("vCard")
        } else if( nameElement === "quit" ) {
            ret = qsTr("Quit")
        }
        return ret
    }

    Component {
        id: componentWrapper
        Rectangle {
            id: wrapper
            width: listViewOptions.width
            height: 70
            border.color: "gray"
            Image {
                id: imgItem
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                anchors.leftMargin: 20
                source: image
            }
            Text {
                id: txtItem
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: imgItem.right
                anchors.leftMargin: 20
                text: textItem( name )
                font.pixelSize: 30
            }
            MouseArea {
                id: mouseAreaItem;
                anchors.fill: parent
                onClicked: {
                    wrapper.ListView.view.currentIndex = index
                    dlgOptionsRoster.state = "hidden"
                    dlgOptionsRoster.itemSelected = name
                    dlgOptionsRoster.itemClicked()
                }
            }

            states: State {
                name: "Current"
                when: wrapper.ListView.isCurrentItem
                PropertyChanges { target: wrapper; color: "lightblue" }
            }
        }
    }

    ListView {
        id: listViewOptions
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        //anchors.bottomMargin: 10
        width: parent.width
        model: modelListOptions
        delegate: componentWrapper
        clip: true
    }


    property int howLong: 400
    states: [
        State {
            name: "visible"
            AnchorChanges { target: dlgOptionsRoster; anchors.verticalCenter: parent.verticalCenter }
            AnchorChanges { target: dlgOptionsRoster; anchors.horizontalCenter: parent.horizontalCenter }
            PropertyChanges { target: dlgOptionsRoster; scale: 1 }
            PropertyChanges { target: dlgOptionsRoster; z: 10 }
        },
        State {
            name: "hidden"
            AnchorChanges { target: dlgOptionsRoster; anchors.top: parent.bottom }
            AnchorChanges { target: dlgOptionsRoster; anchors.left: parent.right; }
            PropertyChanges { target: dlgOptionsRoster; anchors.leftMargin: -100 }
            PropertyChanges { target: dlgOptionsRoster; scale: 0.1 }
            PropertyChanges { target: dlgOptionsRoster; z: 0 }
        }
    ]
    transitions: [
        Transition {
            from: "hidden"; to: "visible"
            ParallelAnimation {
                NumberAnimation { duration: howLong; property: "scale"; easing.type: Easing.InOutQuad }
                AnchorAnimation { duration: howLong; easing.type: Easing.InOutQuad }
                onRunningChanged: {
                    if( running == true ) { dlgOptionsRoster.visible = true }
                }
            }
        },
        Transition {
            from: "visible"; to: "hidden"
            ParallelAnimation {
                NumberAnimation { duration: howLong; property: "scale"; easing.type: Easing.InOutQuad }
                AnchorAnimation { duration: howLong; easing.type: Easing.InOutQuad }
                onRunningChanged: {
                    if( running == false ) { dlgOptionsRoster.visible = false }
                }
            }
        }
    ]

}
